<template>
  <ul>
    <li cursor-pointer><RouterLink to="/">Home</RouterLink></li>
    <li cursor-pointer><RouterLink to="/about">About</RouterLink></li>
  </ul>

  <div border border-0 border-b-2 border-solid border-b-green-600 flex flex-col justify-center w-100vw>
    <h3>路由出口</h3>
    <RouterView />
  </div>
  <div text-center font-sans p4 flex flex-col items-center gap-8>
    <div class="flex gap-4">
      <div class="i-logos-vue text-3xl" />
      <div class="i-logos-unocss text-3xl" />
      <div class="i-logos-postcss text-3xl" />
    </div>
    <div text-gray2 text-2xl font-medium>
      UnoCSS + Vue
    </div>
    <div class="bg-[url(./assets/uno.png)] bg-[url(./assets/logo.png)] no-repeat bg-center bg-no-repeat bg-cover bg-[length:100%]" h-220px w-220px />
    <div class="flex gap-2 items-center">
      <button bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600 cursor-pointer>
        Hello
      </button>
      <div class="dark">
        <a href="#" text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-red-500 dark:hover:bg-yellow-600 cursor-pointer>Hello</a>
      </div>
    </div>
    <div class="my-class" c-red-400>
      Directives in Vue SFC
    </div>
    <img src="./assets/logo.png" alt="" />
    <div class="test-bg">测试背景图片</div>
  </div>
</template>

<style>
@screen md {
  .my-class {
    @apply bg-red-800;
    color: theme('colors.red.300');
  }
}

.test-bg {
  width: 200px;
  height: 200px;
  background: url("./assets/uno.png") center / cover no-repeat;
}
</style>
<script setup lang="ts">
</script>
